<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>4-6</title>
    <script src='vue/vue.js'></script>
</head>
<!-- 

 -->

<body>
    <div id="root">

    </div>
    <script>
        var vm = new Vue({
            el: "#demo1",
            template: ` <ul class = "bg" style = "fontSize:20px" abc = "yyy"> 
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                        </ul> `
        });

        var vm = new Vue({
            el: "#demo",
            render(createElement) {
                var obj = createElement("ul", {
                    class: {
                        bg: true
                    },
                    style: {
                        fontSize: "50px"
                    },
                    attrs: {
                        abc: "yyy"
                    },
                }, [
                    createElement("li", 1),
                    createElement("li", 2),
                    createElement("li", 3)
                ]);
                console.log(obj);
                return obj;
            }
        });


        createElement(
            // 1.传入你想要生成最外层的根节点 
            // {String | Object | Function} 
            // 可以是一个 HTML 标签字符串，组件选项对象，或者 
            // 解析上述任何一种的一个 async 异步函数，必要参数。 
            'ul',
            // 2.一个包含DOM节点相关属性的数据对象 
            // {Object} 
            // 设置 生成DOM 中的属性。一般操作根节点，可选参数。 
            {
                class: {
                    bg: true
                },
                style: {
                    fontSize: "50px"
                },
                attrs: {
                    abc: "yyy"
                },
                domProps: {
                    /*innerHTML:"<li>我是里面的html结构</li>" */
                }
            },
            // 3.生成子节点 
            // {String | Array} 
            // 子节点由 `createElement()` 构建而成， 
            // 也可以使用字符串来生成“文本节点”。可选参数。
            [createElement("li", 1), 
            createElement("li", 2), 
            createElement("li", 3)
            ])
    </script>
</body>

</html>